<template>
  <div>
    <header>
      <van-nav-bar title="导航" left-arrow @click-left="onClickLeft" />
    </header>
    <main>
      <div class="map">
        <MapContainer></MapContainer>
      </div>
      <!-- <div class="dialog">
        <div class="number">
          <span>任务编号: {{ misson.number }}</span>
        </div>
        <div>
          <span class="leftS"><i class="iconfont icon-qidian"></i></span
          ><span class="right">{{ misson.start }}</span>
        </div>
        <div class="line">
            <i class="iconfont icon-xuxian"></i>
        </div>
        <div>
          <span class="leftZ"><i class="iconfont icon-zhongdian"></i></span
          ><span class="right">{{ misson.end }}</span>
        </div>
      </div> -->
      <SDialog :misson="misson" type="0"></SDialog>
    </main>
    <footer>
      <van-button round>开始导航</van-button>
    </footer>
  </div>
</template>
<script>
import MapContainer from "@/components/map/MapContainer.vue";
import SDialog from "@/components/SDialog.vue";
export default {
  name: "RoadMap",
  components: {
    MapContainer,
    SDialog,
  },
  data() {
    return {
      misson: {
        number: "XAHH1234567",
        start: "北京市昌平区回龙观街道西三旗桥东金燕龙写字楼8877号",
        end: "河南省郑州市路北区北清路99号",
      },
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang='less'  scoped>
.van-hairline--bottom::after {
  border: none;
}
header {
  padding-top: 43px;
  background-color: #fff;
  width: 100vw;
  height: 93px;
  position: fixed;
  top: 0px;
  left: 0;
  z-index: 999;
  .van-nav-bar {
    width: 100%;
    height: 100%;
    line-height: 50px;
    font-size: 25px;
    color: #000;
    /deep/.van-nav-bar__title {
      font-weight: 700;
    }
  }
}
main {
  margin-top: 93px;
  margin-bottom: 103px;
  width: 100vw;
  height: 100vh;
  position: relative;
  
}
footer {
  position: fixed;
  left: 0;
  padding-bottom: 33px;
  bottom: 0;
  width: 100vw;
  height: 83px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  .van-button {
    margin-top: 10px;
    width: 207px;
    height: 50px;
    background-color: #ef4f3f;
    color: #fff;
  }
}
</style>
